六、元素节点的常用属性
元素节点除了有所有的节点都有的属性比如：nodeName、nodeValue、nodeType外，还有一些特有的属性，来方便操作标签元素。
6.1 tagName属性
tagName属性是nodeName的另一中写法。注意区别是：tagName只在标签节点中有，而nodeName在所有类型的(12种)节点中都存在。
它的值表示的就是标签的名字。
<body>
<p id="p1">我是一个p标签</p>
<script type="text/javascript">
var p1 = document.getElementById("p1");
alert(p1.tagName); // p
</script>
</body>
6.2 innerHTML属性
innerHTML 属性设置或返回标签的开始和结束标签之间的 HTML。
值为为文本
注意：这个属性的值是这个标签的开始和结束部分之间的所有内容，但是
<body>
<p id="p1"><a href="http://www.yztcedu.com">点我进入育知同创官网</a></p>
<P><button onclick="getHTML();">点我获取超级链接的所有内容</button></P>
<p><button onclick="setHTML();">点我更改整个超级链接</button></p>
<script type="text/javascript">
var p1 = document.getElementById("p1");
function getHTML () {
alert(p1.innerHTML);
}
function setHTML () {
p1.innerHTML = "<a href='https://www.baidu.com'>点我进入百度主页</a>"
}
</script>
</body>
6.3 innerText属性
innerText值获取标签中的文本内容，子标签本身不会获取到。
去修改的时候，即使带有标签也会把标签作为纯文本来对待，而不会解析为标签
<body>
<p id="p1"><a href="http://www.yztcedu.com">点我进入育知同创官网</a></p>
<P><button onclick="getHTML();">点我获取超级
链接的所有内容</button></P>
<p><button onclick="setHTML();">点我更改整个超级链接</button></p>
<script type="text/javascript">
var p1 = document.getElementById("p1");
function getHTML () {
alert(p1.innerText);
}
function setHTML () {
p1.innerText = "<a href='https://www.baidu.com'>点我进入百度主页</a>"
}
</script>
</body>
//其实还有一个属性：textContent 和innerText的作用相同。
6.4 id属性
就是指的元素节点的id属性的值，与getAttribute("id")的值是一样的。
6.5 className属性
className 属性设置或返回元素的 class 属性。(因为class在js中是关键字，所以这个地方把属性名字改成了className)
<body>
<p class="p1">这是一个段落</p>
<script type="text/javascript">
var p1 = document.querySelector(".p1");
alert(p1.className);
</script>
</body>
6.6 value属性
如果一个标签可以拥有value值，则可以可以通过element.value来获取。
一般表单数据才具有vlaue：input、textarea、select
<body>
<input id="in1" type="text" value="abc" />
<p>
<button id="btn" onclick="getValue();" value="abc">获取上面输入框的value属性</button>
</p>
<script type="text/javascript">
var in1 = document.getElementById("in1");
function getValue () {
alert(in1.value); // 获取标签的value值
}
</script>
</body>